
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe62f;</i>
                    <div class="name">pre</div>
                    <div class="code">&amp;#xe62f;</div>
                    <div class="fontclass">.pre</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62e;</i>
                    <div class="name">next</div>
                    <div class="code">&amp;#xe62e;</div>
                    <div class="fontclass">.next</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe668;</i>
                    <div class="name">star</div>
                    <div class="code">&amp;#xe668;</div>
                    <div class="fontclass">.star</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66b;</i>
                    <div class="name">base</div>
                    <div class="code">&amp;#xe66b;</div>
                    <div class="fontclass">.base</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66c;</i>
                    <div class="name">detail</div>
                    <div class="code">&amp;#xe66c;</div>
                    <div class="fontclass">.detail</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe670;</i>
                    <div class="name">down</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.down</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe671;</i>
                    <div class="name">up</div>
                    <div class="code">&amp;#xe671;</div>
                    <div class="fontclass">.up</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67e;</i>
                    <div class="name">alertwarn</div>
                    <div class="code">&amp;#xe67e;</div>
                    <div class="fontclass">.alertwarn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe683;</i>
                    <div class="name">帮助中心</div>
                    <div class="code">&amp;#xe683;</div>
                    <div class="fontclass">.bangzhuzhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67f;</i>
                    <div class="name">close</div>
                    <div class="code">&amp;#xe67f;</div>
                    <div class="fontclass">.close</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe684;</i>
                    <div class="name">关于我们</div>
                    <div class="code">&amp;#xe684;</div>
                    <div class="fontclass">.guanyuwomen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe685;</i>
                    <div class="name">我的账户</div>
                    <div class="code">&amp;#xe685;</div>
                    <div class="fontclass">.wodezhanghu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe687;</i>
                    <div class="name">身份证认证</div>
                    <div class="code">&amp;#xe687;</div>
                    <div class="fontclass">.shenfenzhengrenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe686;</i>
                    <div class="name">联系我们</div>
                    <div class="code">&amp;#xe686;</div>
                    <div class="fontclass">.lianxiwomen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe688;</i>
                    <div class="name">手机认证</div>
                    <div class="code">&amp;#xe688;</div>
                    <div class="fontclass">.shoujirenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe689;</i>
                    <div class="name">银行卡认证</div>
                    <div class="code">&amp;#xe689;</div>
                    <div class="fontclass">.yinxingqiarenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68c;</i>
                    <div class="name">成功</div>
                    <div class="code">&amp;#xe68c;</div>
                    <div class="fontclass">.chenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68d;</i>
                    <div class="name">等待</div>
                    <div class="code">&amp;#xe68d;</div>
                    <div class="fontclass">.dengdai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61b;</i>
                    <div class="name">edit</div>
                    <div class="code">&amp;#xe61b;</div>
                    <div class="fontclass">.edit</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61d;</i>
                    <div class="name">签到</div>
                    <div class="code">&amp;#xe61d;</div>
                    <div class="fontclass">.qdao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61c;</i>
                    <div class="name">user1</div>
                    <div class="code">&amp;#xe61c;</div>
                    <div class="fontclass">.user1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe626;</i>
                    <div class="name">home</div>
                    <div class="code">&amp;#xe626;</div>
                    <div class="fontclass">.home</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63b;</i>
                    <div class="name">wdzai</div>
                    <div class="code">&amp;#xe63b;</div>
                    <div class="fontclass">.wdzai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe647;</i>
                    <div class="name">user_qun</div>
                    <div class="code">&amp;#xe647;</div>
                    <div class="fontclass">.userqun</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe649;</i>
                    <div class="name">add</div>
                    <div class="code">&amp;#xe649;</div>
                    <div class="fontclass">.add</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe653;</i>
                    <div class="name">message</div>
                    <div class="code">&amp;#xe653;</div>
                    <div class="fontclass">.message</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63c;</i>
                    <div class="name">worn</div>
                    <div class="code">&amp;#xe63c;</div>
                    <div class="fontclass">.worn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe632;</i>
                    <div class="name">set</div>
                    <div class="code">&amp;#xe632;</div>
                    <div class="fontclass">.set</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63e;</i>
                    <div class="name">xxi</div>
                    <div class="code">&amp;#xe63e;</div>
                    <div class="fontclass">.xxi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe648;</i>
                    <div class="name">menu</div>
                    <div class="code">&amp;#xe648;</div>
                    <div class="fontclass">.menu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe635;</i>
                    <div class="name">ssuo</div>
                    <div class="code">&amp;#xe635;</div>
                    <div class="fontclass">.ssuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63d;</i>
                    <div class="name">xla</div>
                    <div class="code">&amp;#xe63d;</div>
                    <div class="fontclass">.xla</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe809;</i>
                    <div class="name">圈子_line</div>
                    <div class="code">&amp;#xe809;</div>
                    <div class="fontclass">.quanziline</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe629;</i>
                    <div class="name">赞</div>
                    <div class="code">&amp;#xe629;</div>
                    <div class="fontclass">.zan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61e;</i>
                    <div class="name">circle</div>
                    <div class="code">&amp;#xe61e;</div>
                    <div class="fontclass">.circle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e;</i>
                    <div class="name">发帖子</div>
                    <div class="code">&amp;#xe60e;</div>
                    <div class="fontclass">.fatiezi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe678;</i>
                    <div class="name">编辑帖子</div>
                    <div class="code">&amp;#xe678;</div>
                    <div class="fontclass">.bianjitiezi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6bc;</i>
                    <div class="name">babycan我的帖子</div>
                    <div class="code">&amp;#xe6bc;</div>
                    <div class="fontclass">.13bbcwodetiezi</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
